<nav class="navbar navbar-pf-vertical">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="/" class="navbar-brand">
      <!-- <img class="navbar-brand-icon" src="/assets/microcks.png" alt="Microcks"/> -->
      <img class="navbar-brand-icon" src="/assets/microcks-logo-white-name.png" alt="Microcks"/>
    </a>
  </div>

  <nav class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility">
      <li>
        <button class="btn btn-link dropdown-toggle nav-item-iconic" (click)="openQuickImportDialog()">
          <i class="fa fa-plus"></i>
          &nbsp;
          Quick Import
        </button>
      </li>
      <li class="dropdown" dropdown>
        <button id="dropdownHelpMenu" class="btn btn-link dropdown-toggle nav-item-iconic" dropdownToggle aria-controls="dropdown-helpmenu" aria-haspopup="true" aria-expanded="true">
          <span title="Help" class="fa pficon-help"></span> &nbsp; <span class="caret"></span>
        </button>
        <ul id="dropdown-helpmenu" *dropdownMenu class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownHelpMenu">
          <li><a (click)="openHelpDialog()">Help</a></li>
          <li><a (click)="openAboutModal(aboutTemplate)">About</a>
            <ng-template #aboutTemplate>
              <pfng-about-modal [config]="aboutConfig"
                                (onCancel)="closeAboutModal($event)">
              </pfng-about-modal>
            </ng-template>
          </li>
        </ul>
      </li>
      <li class="dropdown" dropdown *ngIf="isAuthEnabled()">
        <button id="dropdownUserMenu" class="btn btn-link dropdown-toggle nav-item-iconic" dropdownToggle aria-controls="dropdown-usermenu" aria-haspopup="true" aria-expanded="true">
          <span title="Username" class="fa pficon-user"></span>
          <span class="dropdown-title">
              {{ (user() | async)?.name
                ? (user() | async)?.name
                : (user() | async)?.login
            }} <span class="caret"></span>
          </span>
        </button>
        <ul id="dropdown-usermenu" *dropdownMenu class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownUserMenu">
          <li><a href="{{ getPreferencesLink() }}">Preferences</a></li>
          <li><a (click)="logout()">Logout</a></li>
        </ul>
      </li>
      <li>
        <button class="btn btn-link dropdown-toggle nav-item-iconic" (click)="toggleDarkMode()">
          <i class="fa {{ themeIcon() }}"></i>
        </button>
      </li>
    </ul>
  </nav>
</nav>

<div class="nav-pf-vertical nav-pf-vertical-with-sub-menus">
  <ul class="list-group">
    <li class="list-group-item">
      <a routerLink="/">
        <span class="fa fa-dashboard" data-toggle="tooltip" title="Dashboard"></span>
        <span class="list-group-item-value">Dashboard</span>
      </a>
    </li>
    <li class="list-group-item">
      <a routerLink="/services">
        <span class="pficon pficon-plugged" data-toggle="tooltip" title="APIs | Services"></span>
        <span class="list-group-item-value">APIs | Services</span>
      </a>
    </li>
    <li class="list-group-item">
      <a routerLink="/importers">
        <span class="fa fa-cogs" data-toggle="tooltip" title="Importers"></span>
        <span class="list-group-item-value">Importers</span>
      </a>
    </li>
    <li class="list-group-item">
      <a routerLink="/traces">
        <span class="fa fa-sitemap" data-toggle="tooltip" title="Live Traces"></span>
        <span class="list-group-item-value">Live Traces</span>
      </a>
    </li>
    <li class="list-group-item" *ngIf="canUseMicrocksHub()">
      <a routerLink="/hub">
        <span class="pficon pficon-topology" data-toggle="tooltip" title="Mocks Hub"></span>
        <span class="list-group-item-value">Microcks Hub</span>
      </a>
    </li>
    <li class="list-group-item" *ngIf="hasRole('admin')">
      <a routerLink="/admin">
        <span class="fa fa-shield" data-toggle="tooltip" title="Administration"></span>
        <span class="list-group-item-value">Administration</span>
      </a>
    </li>
  </ul>
</div>
